<template>
  <div class="rank">
    <div class="rank-menu">
      <div class="menu-title">MV分类</div>
      <div class="menu-item" @click="getMvData('m')">
        <div class="item-pic">
          <img src="/imgs/tuijian.png" />
        </div>
        <span class="item-title">新歌推荐</span>
        <span class="item-title grey">每天更新</span>
      </div>
      <div class="menu-item" @click="getMvData('chM')">
        <div class="item-pic">
          <img src="/imgs/mv.png" />
        </div>
        <span class="item-title">华语精选</span>
        <span class="item-title grey">热门mv</span>
      </div>
      <div class="menu-item" @click="getMvData('westM')">
        <div class="item-pic">
          <img src="/imgs/mv.png" />
        </div>
        <span class="item-title">欧美精选</span>
        <span class="item-title grey">热门mv</span>
      </div>
      <div class="menu-item" @click="getMvData('japKorM')">
        <div class="item-pic">
          <img src="/imgs/mv.png" />
        </div>
        <span class="item-title">日韩精选</span>
        <span class="item-title grey">热门mv</span>
      </div>
    </div>
    <div class="rank-content">
        <div class="mv-title">
          <span>新歌推荐</span>
        </div>
      <div class="mv-list">
        <el-row v-for="(row, index) in rows" :key="index" :gutter="20">
          <el-col :span="6" v-for="item of row" :key="item.id">
            <div class="mv-item">
                <a :href="'/mvPlay?id='+ item.id" target="_blank">
                    <img :src=" item.picture.resourcePath ">
                    <i class="el-icon-video-play"></i>
                </a>
                <span :href="'/mvPlay?id='+ item.id" target="_blank">{{ item.name }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script type="module">
var mvs = [];
module.exports = {
  data: function() {
    return {
      mvData: [],
      mvType: 'm'
    };
  },
  methods: {
    getMvData(type) {
      this.mvType = type;
      $.ajax({
        url: "/" + type + "vLists",
        type: "get",
        dataType: "json",
        async: false,
        success(data) {
          console.log(data);
          mvs = data.mvs;
        }
      });
      this.mvData = mvs;
    }
  },
  computed: {
    rows() {
      const rows = [];
      this.mvData.forEach((item, index) => {
        const row = Math.floor(index / 4)
        if (!rows[row]) {
          rows[row] = []
        }
        rows[row].push(item)
      })
      return rows
    }
  },
  mounted: function() {
    this.getMvData('m');
  }
};
</script>
